<template>
	<view class="content">
		<view class="navbar">
			<view :class=" ['tab-item',CategoryID == 0?'on':'']" @click="typeclick" data-type='0'>
				未使用({{list.noUsedCount}})</view>
			<view :class=" ['tab-item',CategoryID == 1?'on':'']" @click="typeclick" data-type='1'>
				已使用({{list.usedCount}})</view>
			<view :class=" ['tab-item',CategoryID == 2?'on':'']" @click="typeclick" data-type='2'>
				已过期({{list.overCount}})</view>
		</view>

		<view class="list" v-if="CategoryID == 0">
			<view class="item" :style="{background:'url('+ img +') center no-repeat',backgroundSize:'cover'}" v-for="(item,index) in list.noUsedList" :key="index" :item-id="index">
				<view class="left">
					<view class="t1">
						<text>￥</text>{{item.reduction}}
					</view>
					<view class="t2">
						{{item.name}}
					</view>
				</view>
				<view class="right">
					<view class="t1">
						{{item.reduction}}{{item.reduction>0?'元':''}}优惠券
					</view>
					<view class="t2">
						{{item.beginDate}} 至 {{item.endDate}}
					</view>
					<view class="flex-box">
						<navigator class="btn" open-type="switchTab" url="/pages/allgoods/allgoods">
							去使用 
						</navigator>
						<text>{{item.storeProductCategory.name}}</text>
					</view>
				</view>
				<view class="bq">
					未使用
				</view>
			</view>
		</view>
		
		<view class="list" v-if="CategoryID == 1">
			<view class="item used" :style="{background:'url('+ img +') center no-repeat',backgroundSize:'cover'}" v-for="(item,index) in list.usedList" :key="index" :item-id="index">
				<view class="left">
					<view class="t1">
						<text>￥</text>{{item.reduction}}
					</view>
					<view class="t2">
						{{item.name}}
					</view>
				</view>
				<view class="right">
					<view class="t1">
						{{item.reduction}}{{item.reduction>0?'元':''}}优惠券
					</view>
					<view class="t2">
						{{item.beginDate}} 至 {{item.endDate}}
					</view>
					<div class="flex-box">
						<view class="btn">
							已使用
						</view>
						<text>{{item.storeProductCategory.name}}</text>
					</div>
					
				</view>
				<view class="bq">
					已使用
				</view>
			</view>

		</view>

		<view class="list" v-if="CategoryID == 2">
			<view class="item exc" :style="{background:'url('+ img +') center no-repeat',backgroundSize:'cover'}" v-for="(item,index) in list.overList" :key="index" :item-id="index">
				<view class="left">
					<view class="t1">
						<text>￥</text>{{item.reduction}}
					</view>
					<view class="t2">
						{{item.name}}
					</view>
				</view>
				<view class="right">
					<view class="t1">
						{{item.reduction}}{{item.reduction>0?'元':''}}优惠券
					</view>
					<view class="t2">
						{{item.beginDate}} 至 {{item.endDate}}
					</view>
					<div class="flex-box">
						<view class="btn">
							已过期
						</view>
						<text>{{item.storeProductCategory.name}}</text>
					</div>
				</view>
				<view class="bq">
					已使用
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		couponList
	} from '@/api/user.js';
	export default {
		data() {
			return {
				CategoryID: 0,
				list: [],
				img: '../../static/images/coupon.png'
			};
		},
		onLoad() {
			this.init()
		},
		methods: {
			typeclick(e) {
				console.log(e);
				this.CategoryID = e.currentTarget.dataset.type

			},
			init() {
				couponList().then(res => {
					this.list = res.data
					if (this.list.noUsedList!='') {
						this.list.noUsedList.forEach((i) => {
							i.beginDate = this.happenTimeFun(i.beginDate)
							i.endDate = this.happenTimeFun(i.endDate)
						})
					}
					if (this.list.overList!='') {
						this.list.overList.forEach((i) => {
							i.beginDate = this.happenTimeFun(i.beginDate)
							i.endDate = this.happenTimeFun(i.endDate)
						})
					}
					if (this.list.usedList!='') {
						this.list.usedList.forEach((i) => {
							i.beginDate = this.happenTimeFun(i.beginDate)
							i.endDate = this.happenTimeFun(i.endDate)
						})
					}
				})
				
			},
			happenTimeFun(num) { //时间戳数据处理
				let date = new Date(num.replace(/-/g, '/'));
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				return y + '.' + MM + '.' + d;
			},
		}
	}
</script>

<style lang="scss">
	.navbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 70rpx;
		background-color: #f5f5f5;

		.tab-item {
			position: relative;
			padding: 35rpx 0;
			font-size: 24rpx;
		}

		.tab-item.on::before {
			position: absolute;
			content: '';
			width: 100%;
			height: 5rpx;
			bottom: 0;
			background-color: #b81c22;
		}
	}

	.list {
		padding: 70rpx 30rpx;

		.item {
			width: 100%;
			background-repeat: no-repeat;
			background-size: 100% 100%!important;
			padding: 44rpx 0;
			display: flex;
			align-items: center;
			position: relative;
			overflow: hidden;
			margin-bottom: 40rpx;

			.left {
				width: 30%;
				text-align: center;

				.t1 {
					font-size: 66rpx;
					font-weight: bold;
					letter-spacing: 0px;
					color: #c10016;

					text {
						font-weight: normal;
						font-size: 30rpx;
						color: #C10016;
					}
				}

				.t2 {
					font-size: 26rpx;
					padding-top: 30rpx;
				}
			}

			.right {
				padding: 0 7%;
				color: #595757;

				.t1 {

					font-size: 32rpx;

				}

				.t2 {
					font-size: 28rpx;
					padding: 25rpx 0 40rpx 0;
				}
				.flex-box{
					display: flex;
					align-items: center;
					.btn {
						font-size: 18rpx;
						width: 120rpx;
						text-align: center;
						height: 45rpx;
						line-height: 45rpx;
						background-color: #c10016;
						border-radius: 22rpx;
						color: #ffffff;
						margin-right: 20rpx;
					}
					text{
						color: #c10016;
						font-size: 28rpx;
					}
				}

				
				
			}

			.bq {
				position: absolute;
				top: 15%;
				right: -6%;
				line-height: 30rpx;
				background: #C10016;
				color: #ffffff;
				font-size: 14rpx;
				text-align: center;
				transform: rotate(45deg);
				width: 180rpx;
			}
		}

		.item.used {
			opacity: 0.4;
		}

		.item.exc {
			opacity: 0.4;

			.left {
				.t1 {
					color: #b2b2b2;

					text {
						color: #b2b2b2;
					}
				}

				.t2 {
					color: #b2b2b2;
				}
			}

			.right {
				color: #b2b2b2;

				.btn {
					background: #b2b2b2;
				}
			}

			.bq {
				background: #b2b2b2;
			}
			text{
				color: #b2b2b2 !important;
			}
		}
	}
</style>
